<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Untitled Document</title>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function () {


      /**
       :input
       :text
       :password
       :radio
       :checkbox
       :submit
       :image
       :reset
       :button
       :file
       :hidden

       表单对象的属性
       :enabled
       :disabled
       :checked
       :selected
       */


      //1.对表单内 可用input 赋值操作
      $("#btn1").click(function () {
        $(":text:enabled").val("New Value");
      });
      //2.对表单内 不可用input 赋值操作
      $("#btn2").click(function () {
        $("input:disabled").val("New Value Too");
        $("input:disabled").attr("disabled", false)
      });
      //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
      $("#btn3").click(function () {
        alert($(":checkbox:checked").size())
      });
      //4.获取多选框，每个选中的value值
      $("#btn4").click(function () {
        // var str = "";
        // var eles = $(":checkbox:checked");
        // console.log(eles);
        // for(var i=0;i<eles.size();i++){
        // 	str += "【"+$(eles[i]).val()+"】";
        // }
        // alert(str)
        var eles = $(":checkbox:checked");
        var str = "";
        eles.each(
          function () {
            str += "【" + this.value + "】";
          }
        )
        alert(str)
      });
      //5.获取下拉框选中的内容
      $("#btn5").click(function () {
        var str = "";
        //注意这个选择器的特殊，因为select里面的option是真正的被选择项，
        //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
        //必须按照基本选择器选择后代的方法选
        var els = $("select option:selected");
        console.log(els);
        // for (var i = 0; i < els.size(); i++) {
        //   str += "【" + $(els[i]).val() + "】";
        // }
        els.each(
          //  each 里面的function ()可以不放参数，也可以放，放参数的话第一个固定的是表示下标，第二个表示遍历出来的对象
          function () {
            str += "【" + this.value + "】";
          }
        )
        alert(str)
      });
    })
  </script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<br/><br/>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button>
<br/><br/>
<button id="btn5">获取下拉框选中的内容.</button>
<br/><br/>

<form id="form1" action="#">
  可用元素: <input name="add" value="可用文本框1"/><br>
  不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
  可用元素: <input name="che" value="可用文本框2"/><br>
  不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
  <br>

  多选框: <br>
  <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
  <input type="checkbox" name="newsletter" value="test2"/>test2
  <input type="checkbox" name="newsletter" value="test3"/>test3
  <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
  <input type="checkbox" name="newsletter" value="test5"/>test5
  <input type="button" enabled value="登录"/>
  <br><br>
  下拉列表1: <br>
  <select name="test" multiple="multiple" style="height: 100px" id="sele1">
    <option>浙江</option>
    <option selected="selected">辽宁</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广州</option>
    <option>湖北</option>
  </select>

  <br><br>
  下拉列表2: <br>
  <select name="test2">
    <option>浙江</option>
    <option>辽宁</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
  </select>
</form>
</body>
</html>

